<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <div class="con"></div>
        <div class="left-btn"><</div>
        <select class="select"></select>
        <ul class="nav-list"></ul>
        <div class="right-btn">></div>
    </div>

    <script>
        let data = [];

        for(let i = 0;i<20;i++){
            data.push({
                title:`标题${i+1}`
            })
        }

        class Paganation{
            constructor(params){
                this.data = params.data;
                this.list = params.list;
                this.wrap = this.getDom(params.el);
                this.con = this.getDom('.con',this.wrap);
                this.leftBtn = this.getDom('.left-btn',this.wrap);
                this.rightBtn = this.getDom('.right-btn',this.wrap);
                this.nav = this.getDom('.nav-list',this.wrap);
                this.select = this.getDom('.select',this.wrap);
                this.init()
            }

            init(){
                this.limit = this.list[0];
                this.pagenum = 1;
                this.renderSelect();
                this.renderNav();
                this.renderCon();
                this.addEvent();
            }

            addEvent(){
                this.select.onchange = () => {
                    this.limit = this.select.value;
                    this.pagenum = 1;
                    this.renderNav();
                    this.renderCon();
                }

                this.nav.onclick = (e) => {
                    this.pagenum = e.target.innerHTML;
                    this.renderCon();
                }

                this.leftBtn.onclick = () => {
                   if(this.pagenum > 1){
                       this.pagenum--;
                   } 
                   this.renderCon()
                }

                this.rightBtn.onclick = () => {
                   if(this.pagenum < this.size){
                       this.pagenum++;
                   } 
                   this.renderCon()
                }

            }

            renderSelect(){
                this.select.innerHTML = this.list.map(item => {
                    return `<option value="${item}">每页${item}</option>`
                }).join('')
            }

            renderNav(){
                this.size = Math.ceil(this.data.length/this.limit);
                let str = '';
                for(let i = 0;i<this.size;i++){
                    str += `<li>${i+1}</li>`
                }
                this.nav.innerHTML = str;
            }

            renderCon(){
                let start = (this.pagenum - 1) * this.limit;
                let end = this.pagenum * this.limit;
                this.con.innerHTML = this.data.slice(start,end).map(item => {
                    return `
                        <p>${item.title}</p>
                    `
                }).join('')
            }

            getDom(elStr,parent){
                if(elStr != null){
                    return typeof elStr === 'object' ? elStr : (parent || document).querySelector(elStr)    
                }
            }
        }

        new Paganation({
            data,
            el:document.querySelector('.wrap'),
            list:[5,10,15,20]
        })
    </script>
</body>
</html>